<template>
    <div class="main-selector-root">
        <ul >
            <li class="class-selector clearfix" v-for="selectClass in selectsData">
                <span>{{selectClass.name}}</span>
                <ul class="clearfix">
                    <li class="select" :class="{active : select.isActive}" v-for="select in selectClass.selects" @click="selectFun(selectClass.selects,select)">
                        {{select.name}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: "main-selector",
        props:['selects-data'],
        data:function () {
            return {

            }
        },
        methods:{
            selectFun:function (selectsList,select) {
                selectsList.forEach(function (s) {
                    s.isActive = false
                })
                select.isActive = true
            }
        }
    }
</script>

<style scoped>
    .main-selector-root{
        border: 1px solid #e5e5e5 ;
        padding: 10px;
    }
    .class-selector:not(:last-of-type){
        margin-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;

    }
    .class-selector>span{
        width: 50px;
        display: block;
        float: left;
        color: #999;
        font-size: 14px;
        padding-right: 10px;
        padding-bottom: 10px;
        border-top: 10px;
    }
    .class-selector>ul{
        float: left;
        width: calc(100% - 60px);
    }
    .class-selector .select{
        float: left;
        margin-right: 12px;
        margin-bottom: 5px;
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        transition: color 500ms 0s;
    }
    .class-selector .select:hover:not(.active){
        color: #e5342a;
    }
    .class-selector .select.active{
        background-color: #e5342a;
        border-radius: 30px;
        color: white;
    }


</style>
